<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../assets/css/bootstrap.css" rel="stylesheet" />
		<!-- FONTAWESOME STYLES-->
		<link href="../assets/css/font-awesome.css" rel="stylesheet" />
		<!-- CUSTOM STYLES-->
		<link href="../assets/css/custom.css" rel="stylesheet" />
		<!-- GOOGLE FONTS-->
		<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
		<link rel="stylesheet" href="../assets/command/Bootstrap/bootstrap-3.3.0/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css" />
		<script src="../assets/command/jquery-3.4.0.min.js"></script>
		<script src="../assets/command/Bootstrap/bootstrap-3.3.0/js/bootstrap.min.js"></script>
		<script src="../assets/command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="../assets/command/bower_components/moment/min/moment.min.js"></script>
		<script src="../assets/command/bower_components/moment/min/locales.min.js"></script>
		<script src="../assets/command/bower_components/bootbox/bootbox.min.js"></script>
		<script src="../assets/command/bower_components/bootstrap-select/dist/js/bootstrap-select.js" type="text/javascript"
		 charset="utf-8"></script>
		<script src="../assets/command/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js" type="text/javascript"
		 charset="utf-8"></script>
		<script src="../assets/command/bower_components/bootstrap-table/dist/bootstrap-table.min.js" type="text/javascript"
		 charset="utf-8"></script>
		<script src="../assets/command/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js" type="text/javascript"
		 charset="utf-8"></script>
		<script src="../assets/command/bower_components/moment/min/locales.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				$.ajax({
					type: "get",
					dataType: "json",
					url: "../json/wailai.json",
					success: function(reslt) {
						creteTable(reslt)
					},
					error: function(date) {
						alert(date);
					},

				});


				$("#btnNew").click(function() {
					$("#divData").modal();
				})
				$("#btnUpdate").click(function() {
					$("#updatediv").modal();
				})
				$("#btnSelect").click(function() {
					$("#selectdiv").modal();
				})
				$("#btnDel").click(function() {
					$("#deletedelData").modal();
				})
				getRole();
				getRoles();
			});
			  function getRole() {
				$("#selRole").empty();
				$.ajax({
					type: "get",
					url: "../json/waibuselect.json",
					dataType: "json",
					success: function(data) {
						console.log(data);
						if (data != null) {
							$.each(data, function(index01, value01) {
								console.log("索引值：" + index01 + "值" + value01.rid + ";" + value01.rolename);
								$("#selRole").append("<option value>" + value01.rolename + "</option>")
							})
						}
					}
				})
			}
			  function getRoles() {
				$("#selRoles").empty();
				$.ajax({
					type: "get",
					url: "../json/zhiwu.json",
					dataType: "json",
					success: function(datas) {
						console.log(datas);
						if (datas != null) {
							$.each(datas, function(index1, value1) {
								console.log("索引值：" + index1 + "值" + value1.rids + ";" + value1.rolenames);
								$("#selRoles").append("<option value>" + value1.rolenames + "</option>")
							})
						}
					}
				})
			}
			 function getRoles() {
				$("#xb").empty();
				$.ajax({
					type: "get",
					url: "../json/xingbie.json",
					dataType: "json",
					success: function(datas) {
						console.log(datas);
						if (datas != null) {
							$.each(datas, function(index1, value1) {
								console.log("索引值：" + index1 + "值" + value1.rid + ";" + value1.sex);
								$("#xb").append("<option value>" + value1.sex + "</option>")
							})
						}
					}
				})
			}
			function getRole() {
				$("#sects").empty();
				$.ajax({
					type: "get",
					url: "../json/waibuselect.json",
					dataType: "json",
					success: function(data) {
						console.log(data);
						if (data != null) {
							$.each(data, function(index01, value01) {
								console.log("索引值：" + index01 + "值" + value01.rid + ";" + value01.rolename);
								$("#selRole").append("<option value>" + value01.rolename + "</option>")
							})
						}
					}
				})
			}

			function creteTable(userData) {
				$("#tblUser").bootstrapTable("destroy");
				$("#tblUser").bootstrapTable({
					data: userData,
					loadMsg: "正在加载数据",
					sidePagination: "client",
					pageSize: "5",
					pagination: true,
					singleSelect: true,
					columns: [{
							field: "uid",
							checkbox: true,
							align: "center"
						},
						{
							field: "username",
							title: "用户名",
							align: "center"
						},
						{
							field: "tel",
							title: "电话",
							align: "center"
						},
						{
							field: "idcard",
							title: "身份证号",
							align: "center"
						},
						{
							field: "fanwei",
							title: "工作范围",
							align: "center"
						},
						{
							field: "idcard",
							title: "身份证号",
							align: "center"
						},
						{
							field: "xueli",
							title: "学历",
							align: "center"
						},
						{
							field: "beizhu",
							title: "备注",
							align: "center"
						},
						{
							field: "didian",
							title: "工作地点",
							align: "center"
						},


					]
				})
			}
		</script>
	</head>
	<body>
		<h2>外部人员管理信息</h2>
		<h5>欢迎回到外部人员管理页面 </h5>


		<!-- /. ROW  -->
		<hr />
		<div class="row">
			<div class="col-md-12">
				<!-- Form Elements -->
				<div class="panel panel-default">
					<div class="panel-heading">
						外部人员管理

					</div>
					<div class="panel-body">
						<div class="row">
							<div class="col-md-12">
								<form role="form">
									<div class="form-group">

										<div class="container-fluid">
											<div class=" row col-md-10">

											</div>
											<div class=" row col-md-10" style="margin-top: 15px; margin-left: px;">
												<button type="button" id="btnSelect" class="btn btn-info">查询</button>
												<button id="btnNew" class=" btn btn-default" type="button">新增</button>
												<button id="btnUpdate" class=" btn btn-success" type="button">修改</button>
												<button id="btnDel" class=" btn btn-danger" type="button">删除</button>
											</div>
											<div class="row col-md-10">
												<table id="tblUser"></table>
											</div>
										</div>
										<div class="modal fade" id="divData" tabindex="-1" role="dialog" aria-labelledby="myModelLable" aria-hidden="hidden">
											<div class="modal-dialog">
												<div class="modal-content">
													<div class="modal-header">
														<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
														<h4 class="modal-title" id="">详细信息</h4>
													</div>
													<div class="modal-body form-inline">
														<div class="form-group">
															<label class="control-lable" for="">用户名称：</label>
															<input type="text" id="txtDatausername" name="Datausername" maxlength="20" class="form-control" /><br /><br />
															<label class="control-lable" for="">联系电话：</label>
															<input type="text" id="txttel" name="Datatel" maxlength="20" class="form-control" /><br /><br />
															<label class="control-lable" for="">身份证号：</label>
															<input type="text" id="idcard" name="id" maxlength="20" class="form-control" /><br /><br />
															<label class="control-lable" for="">工作地点:&nbsp;&nbsp;</label>
															<input type="text" id="idcard" name="id" maxlength="20" class="form-control" /><br /><br />
															<label class="control-lable" for="">当前职务：</label>
															<input type="text" id="idcard" name="id" maxlength="20" class="form-control" /><br /><br />

														</div>
														<div class="modal-footer">
															<button type="button" id="btnsave" class="btn btn-info">新增</button>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="modal fade" id="deletedelData" tabindex="-1" role="dialog" aria-labelledby="myModelLable"
										 aria-hidden="hidden">
											<div class="modal-dialog">
												<div class="modal-content">
													<div class="modal-header">
														<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
														<h4 class="modal-title" id="">删除用户</h4>
													</div>
													<div class="modal-body form-inline">
														<table class="table">
															<thead>
																<tr>
																	<th scope="col">#</th>
																	<th scope="col">姓名</th>
																	<th scope="col">性别</th>
																	<th scope="col">状态</th>
																</tr>
															</thead>
															<tbody>
																<tr>
																	<th scope="row">1</th>

																	<td>张三</td>
																	<td>男</td>
																	<td>在职</td>
																</tr>
																<tr>
																	<th scope="row">2</th>
																	<td>李四</td>
																	<td>女</td>
																	<td>在职</td>
																</tr>
																<tr>
																	<th scope="row">3</th>
																	<td>王五</td>
																	<td>男</td>
																	<td>在职</td>
																</tr>
															</tbody>
														</table>
														<div class="modal-footer">
															<button type="button" id="btnsave" class="btn btn-info">删除</button>
														</div>
													</div>
												</div>
											</div>
										</div>

										<div class="modal fade" id="updatediv" tabindex="-1" role="dialog" aria-labelledby="myModelLable" aria-hidden="hidden">
											<div class="modal-dialog">
												<div class="modal-content">
													<div class="modal-header">
														<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
														<h4 class="modal-title" id="">详细信息</h4>
													</div>
													<div class="modal-body form-inline">
														<div class="form-group">
															<label class="control-lable" for="">用户名称：</label>
															<input type="text" id="txtDatausername" name="Datausername" maxlength="20" class="form-control" />
															<label class="control-lable" for="">联系电话：</label>
															<input type="text" id="txttel" name="Datatel" maxlength="20" class="form-control" />
															<label class="control-lable" for="">身份证号：</label>
															<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
															&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;<label class="control-lable" for="">祖籍:</label>
															<input type="text" id="idcard" name="id" maxlength="20" class="form-control" /><br />
															<label class="control-lable" for="">出生日期：</label>
															<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
															&nbsp; &nbsp; &nbsp;&nbsp; <label class="control-lable" for="">性别：</label>
															<select class="form-control" id="xb">
																

															</select>
														</div>
														<div class="modal-footer">
															<button type="button" id="btnsave" class="btn btn-info">修改</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="modal fade" id="selectdiv" tabindex="-1" role="dialog" aria-labelledby="myModelLable" aria-hidden="hidden">
											<div class="modal-dialog">
												<div class="modal-content">
													<div class="modal-header">
														<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
														<h4 class="modal-title" id="">详细信息</h4>
													</div>
													<div class="modal-body form-inline">
														<div class="form-group">
															<label class="control-lable" for="">用户名称：</label>
															<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
															<button type="button" id="btnsave" class="btn btn-info">查询</button><br /><br />
															<label class="control-lable" for="">用户备注：</label>
															<input type="text" id="idcard" name="id" maxlength="20" class="form-control" />
															<button type="button" id="btnsave" class="btn btn-info">查询</button><br /><br />
															<label class="control-lable">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;科室：</label>
															<select id="selRole" name="role" class="form-control"></select>
															&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label class="control-lable">&nbsp;&nbsp;职务：</label>
															<select id="selRoles" name="roles" class="form-control"></select>
														</div>
														<div class="modal-footer">
															<button type="button" id="btnsave" class="btn btn-info">查询</button>
														</div>
													</div>
												</div>
											</div>
										</div>

	</body>
</html>
